<!-- eslint-disable vue/no-mutating-props -->
<template>
  <div class="car-top">
    <span class="car-tlt">换车记录{{ props.index + 1 }}</span>
    <div class="car-open" @click="showRecord">{{ carShow ? '收起' : '展开' }} <icon-down v-if="carShow" /><icon-up v-if="!carShow" /></div>
  </div>
  <div class="car">
    <div class="car-msg">
      <div class="car-updown">
        <span class="lic">
          换下车牌号：{{ detail.replaceReturnLicenseNo }}
          <a-tag color="red" v-if="detail.replaceReturnLabel">{{ detail.replaceReturnLabel }}</a-tag>
        </span>
        <span class="model">换下车型：{{ detail.replaceReturnModelName }}</span>
      </div>
      <div class="car-line"></div>
      <div class="car-updown">
        <span class="lic">
          换上车牌号：{{ detail.replaceGiveLicenseNo }}
          <a-tag color="red" v-if="detail.replaceGiveLabel">{{ detail.replaceGiveLabel }}</a-tag>
        </span>
        <span class="model">换上车型：{{ detail.replaceGiveModelName }}</span>
      </div>
    </div>
    <a-divider />
    <div class="member-msg">
      <div class="msg-tlt"><span>换车时间：</span>{{ detail.replaceTime || '-' }}</div>
      <!-- <div class="msg-tlt fx" v-if="detail.contractFileId">
        <span>换车合同：</span>
        <template>
          <file-preview v-if="detail.contractFileId" :contractName="detail.contractName" :id="detail.contractFileId" />
          <span v-else>{{ '-' }}</span>
        </template>
      </div>
      <div class="msg-tlt" v-if="detail.contractFileId"><span>合同编号：</span>{{ detail.contractNo || '-' }}</div> -->
      <div class="msg-tlt msg-remark">
        <span>换车备注：</span>{{ detail.replaceRemark || '-' }}
        <a-button size="small" type="text" @click="showRemarkModel"> 修改备注 </a-button>
      </div>
      <div class="msg-tlt"><span>换车人：</span>{{ detail.replaceStaffName || '-' }}</div>
    </div>
    <!-- <div class="member-msg">
      <div class="msg-tlt msg-remark"><span>换车备注：</span>{{ detail.replaceRemark || '-' }}</div>
      <div class="msg-tlt"><span>换车人：</span>{{ detail.replaceStaffName || '-' }}</div>
    </div> -->
    <a-divider v-if="carShow" />
    <div class="section-item" v-if="carShow">
      <div class="section-item-header">换下车信息</div>
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="换下车牌号">{{ detail.replaceReturnLicenseNo }}</a-descriptions-item>
          <a-descriptions-item label="换下车型">{{ detail.replaceReturnModelName }}</a-descriptions-item>
          <a-descriptions-item label="换下车里程">{{ unitVal(detail.replaceReturnCarMileage, '公里') }}</a-descriptions-item>
          <a-descriptions-item label="换下车油（电）量">{{ detail.replaceReturnFuelNum }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="换下车照片">
            <upload-img v-model="detail.returnFileIds" disabled margin />
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="换下车视频">
            <upload-video v-model="detail.returnVideoFileIds" :max="1" disabled />
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
    <a-divider v-if="carShow" />
    <div class="section-item" v-if="carShow">
      <div class="section-item-header">换上车信息</div>
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="换上车牌号">{{ detail.replaceGiveLicenseNo }}</a-descriptions-item>
          <a-descriptions-item label="换上车型">{{ detail.replaceGiveModelName }}</a-descriptions-item>
          <a-descriptions-item label="换上车里程">{{ unitVal(detail.replaceGiveCarMileage, '公里') }}</a-descriptions-item>
          <a-descriptions-item label="换上车油（电）量">{{ detail.replaceGiveFuelNum }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="换上车照片">
            <upload-img v-model="detail.giveFileIds" disabled margin />
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="换上车视频">
            <upload-video v-model="detail.giveVideoFileIds" :max="1" disabled />
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </div>
  <a-modal title="修改备注" width="45vw" v-model:visible="remarkVisible">
    <page-form-item label="换车备注" size="1">
      <a-input placeholder="请输入" :max-length="200" v-model="replaceRemark" />
    </page-form-item>
    <template #footer>
      <a-button @click="remarkVisible = false">关闭</a-button>
      <a-button type="primary" @click="submitRemark">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup name="LongOrderChangeCarItem">
  import { updateRemarkLogApi } from '@/api/order/czsOrder'
  import { Message } from '@arco-design/web-vue'
  import { unitVal } from '@/utils'
  import filePreview from '../../components/upload-file/file-preview.vue'
  import { ref } from 'vue'
  const props = defineProps({
    index: Number,
    detail: Array,
    orderId: Number,
  })
  const emit = defineEmits(['getRemarkLists'])
  const carShow = ref(false)
  // if (props.index == 0) {
  //   carShow.value = true
  // }
  const showRecord = () => {
    carShow.value = !carShow.value
  }
  console.log(props.index)
  console.log(props.detail)
  // 换车记录弹框
  const remarkVisible = ref(false)
  // 换车备注
  const replaceRemark = ref('')
  const showRemarkModel = () => {
    replaceRemark.value = props.detail.replaceRemark
    remarkVisible.value = true
  }
  // 提交修改换车备注
  const submitRemark = () => {
    let params = {
      id: props.orderId, // 换车记录id
      replaceReturnId: props.detail.replaceReturnId, // 换上记录id
      replaceGiveId: props.detail.replaceGiveId, // 换下记录id
      replaceRemark: replaceRemark.value, // 换车备注,
    }
    updateRemarkLogApi(params).then((res) => {
      if (res.code == 200) {
        emit('getRemarkLists')
        Message.success('修改换车备注成功')
        remarkVisible.value = false
      }
    })
  }
</script>

<style lang="less" scoped>
  .car-top {
    width: 100%;
    height: 40px;
    background: #f2f3f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    .car-tlt {
      font-weight: 600;
      font-size: 14px;
    }
    .car-open {
      color: #1890ff;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .car {
    border: 1px solid #f2f3f5;
    padding: 20px 20px 0;
    .car-msg {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      .car-updown {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        margin-left: 20px;
        width: 50%;
        padding: 20px 0;
        .lic {
          font-size: 20px;
          font-weight: 600;
          margin-bottom: 12px;
        }
        .model {
          font-size: 14px;
          font-weight: 400;
        }
      }
      .car-line {
        position: absolute;
        left: 50%;
        width: 1px;
        height: 80%;
        top: 10%;
        background: #f2f3f5;
      }
    }
    .member-msg {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      margin: 0 20px 20px;
      div {
        margin-right: 56px;
      }
      .msg-tlt {
        color: var(--color-neutral-10);
        span {
          color: var(--color-neutral-8);
        }
      }
      .fx {
        display: flex;
      }
      .msg-remark {
        // display: inline-block;
        flex: 1;
        max-width: 700px;
        word-wrap: break-word;
      }
    }
    .section-item-header {
      margin-bottom: 16px !important;
      font-size: 16px !important;
      font-weight: 500 !important;
    }
  }
</style>
